/**
 * Created by Administrator on 2016/11/29.
 */
function addEvent(element,event,listener){
    if(element.addEventListener){
        element.addEventListener(event,listener,false);
    }else if(element.attachEvent){
        element.attachEvent('on'+ event,listener);
    }else{
        element['on'+event] = listener;
    }
}

function puzzleImage(){
    this.init();
    this.setImages(1);
}
puzzleImage.prototype = {
    init:function(){
        this.firstPage();
        this.setMBBorder();
    },
    firstPage:function(){
        var pinTu = document.querySelector(".pinTu");
        addEvent(pinTu,'click',function(){
            this.parentNode.style.display = 'none';
        })
    },
    setMBBorder:function(){
        var MB = document.querySelectorAll('.MB');
        var flagEle = MB[0];
        var _this = this;
        for(var i = 0;i<MB.length;i++){
            MB[i].dataset.num = i+1;
            addEvent(MB[i],'click',function(){
                flagEle.style.border = 'none';
                this.style.border = '2px solid #0493D9';
                flagEle = this;
                _this.setImages(parseInt(this.dataset.num));
            })
            addEvent(MB[i],'mouseover',function(){
                this.style.border = '2px solid #52bbd9';
            })
            addEvent(MB[i],'mouseleave',function(){
                this.style.borderColor = '#ECE9EA';
                flagEle.style.borderColor = '#0493D9';
            })
        }
    },
    setImages:function(n){
        var image_show = document.querySelector('.image_show');
        if(image_show.children.length != 0){
            for(var i = 0;i<image_show.children.length;i++){
                image_show.removeChild(image_show.firstElementChild);
            }
        }
        switch(n){
            case 1:
                var divOne = document.createElement('div');
                divOne.className = "image imageOne";
                image_show.appendChild(divOne);
                break;
            case 2:
                var divTwo = "<div class='image imageTwo_1'></div><div class='image imageTwo_2'></div>";
                image_show.innerHTML = divTwo;
                break;
            case 3:
                var divThree = "<div class='image imageThree1'>" +
                    "</div><div class='image imageThree2'>" +
                    "</div><div class='image imageThree3'></div>";
                image_show.innerHTML = divThree;
                break;
            case 4:
                var divFour = "<div class='image imageFour1'>" +
                    "</div><div class='image imageFour2'>" +
                    "</div><div class='image imageFour3'></div>" + "<div class='image imageFour4'></div>";
                image_show.innerHTML = divFour;
                break;
            case 5:
                var divFive = "<div class='image imageFive1'></div>" +
                    "<div class='image imageFive2'></div>" +
                    "<div class='image imageFive3'></div>" +
                    "<div class='image imageFive4'></div>" +
                    "<div class='image imageFive5'></div>";
                image_show.innerHTML = divFive;
                break;
            case 6:
                var divSix = "<div class='image imageSix1'></div>" +
                    "<div class='image imageSix2'></div>" +
                    "<div class='image imageSix3'></div>" +
                    "<div class='image imageSix4'></div>" +
                    "<div class='image imageSix5'></div>" +
                    "<div class='image imageSix6'></div>";
                image_show.innerHTML = divSix;
                break;
            default:
                alert("error!");
                break;
        }
    }
}
new puzzleImage();
